<template>
	<div>
		<!-- 搜索框 -->
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="margin-left: 20px" type="primary" @click="handleSearchList()" size="small">查询搜索
				</el-button>
				<el-button style="margin-left: 15px" @click="reset()" size="small">重置</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">

					<el-form-item label="状态：">
						<el-radio-group v-model="listQuery.status">
							<el-radio :label="0">冻结失效</el-radio>
							<el-radio :label="1"> 正常</el-radio>

						</el-radio-group>
					</el-form-item>
					<el-form-item label="用户手机号码：">
						<el-input v-model="listQuery.mobile" class="input-width" placeholder="请填写用户手机号码"></el-input>
					</el-form-item>
					<el-form-item label="昵称：">
						<el-input v-model="listQuery.keyword" class="input-width" placeholder="请填写昵称"></el-input>
					</el-form-item>
					<el-form-item label="葵码:">
						<el-input v-model="listQuery.xrkCode" class="input-width" placeholder="请填写葵码"></el-input>
					</el-form-item>

					<el-form-item label="支付宝账号:">
						<el-input v-model="listQuery.apliayUsername" class="input-width" placeholder="请填写支付宝账号">
						</el-input>
					</el-form-item>
					<el-form-item label="微信账号:">
						<el-input v-model="listQuery.wechatUsername" class="input-width" placeholder="请填写微信账号">
						</el-input>
					</el-form-item>
					<el-form-item label="时间查询：">
						<el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
							start-placeholder="开始月份" end-placeholder="结束月份" @change="timechange2">
						</el-date-picker>
					</el-form-item>

				</el-form>
			</div>
		</el-card>

				<el-card class="filter-container" shadow="never">
			<div>
				<el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
					start-placeholder="开始月份" end-placeholder="结束月份" @change="timechange">
				</el-date-picker>
				<el-button style="margin-left: 30px" type="primary" @click="tableToExcel2('Order/listDownload')"
					size="small">列表数据导出</el-button>

			</div>
		</el-card>
		<div>
			<i class="el-icon-document"></i>
			<span>用户信息</span>
			<el-button style="margin-left: 20px" @click="addFn(null,0)" size="mini" type="primary">新增</el-button>

			<el-button style="margin-left: 20px" @click="alldelivery()" size="mini" type="primary">用户信息导入</el-button>
			
		</div>
		<el-table :data="tableData" stripe style="width: 100%">

			<el-table-column prop="photo" label="用户头像">
				<template slot-scope="scope">
					<img :src="scope.row.photo" style="width: 100px; height: 100px" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="xrkCode" label="葵码">
			</el-table-column>
			<el-table-column prop="mobile" label="用户手机号码">
			</el-table-column>
			<el-table-column prop="cMobile" label="常用手机号">
			</el-table-column>
			<el-table-column prop="trueName" label="真实名称">
			</el-table-column>
			<!-- 	<el-table-column prop="nickname" label="昵称">
			</el-table-column> -->
			<el-table-column prop="card" label="身份证">
			</el-table-column>
			<el-table-column prop="addTime" label="新增时间">
			</el-table-column>

			<el-table-column prop="apliayUsername" label="支付宝账号">
			</el-table-column>
			<el-table-column prop="wechatUsername" label="微信账号">
			</el-table-column>
			<el-table-column prop="wechatUsername" label="收款账号">
			</el-table-column>
			<el-table-column prop="depositType" label="收款类型">
				<template slot-scope="scope">
					<span v-if="scope.row.depositType == 1">支付宝</span>
					<span v-if="scope.row.depositType == 2">微信</span>
				</template>
			</el-table-column>
			<el-table-column prop="statusText" label="用户状态">
			</el-table-column>
			<el-table-column prop="checkStatusText" label="审核状态">
				<template slot-scope="scope">
					<!-- 	{{scope.row.statusCheck}} -->
					<div v-if="scope.row.statusCheck == -1" class="statusxBox">{{scope.row.statusText}}</div>
					<div v-if="scope.row.statusCheck == 1" class="statusxBox gre">{{scope.row.statusText}}</div>
					<div v-if="scope.row.statusCheck == 2" class="statusxBox re">{{scope.row.statusText}}</div>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作" width="200">
				<template slot-scope="scope">
					<el-button size="mini" type="success" @click="copyToClipboard(scope.row)">复制</el-button>
					<el-button size="mini" type="primary" @click="addFn(scope.row,1)">查看</el-button>
					<el-button size="mini" type="danger" @click="addFn(scope.row,2)"> 编辑</el-button>

				</template>
			</el-table-column>


		</el-table>
		<!-- 商品编辑栏 -->
		<el-dialog :title="form.abnormalRecordID ? '编辑' : '新增'" :visible.sync="dialogVisible" width="70%"
			:append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" :disabled="addDisable">
				<div style="display: flex;">
					<div style="flex: 1;margin-right: 200px;">

						<el-form-item label="葵码">
							<el-input v-model="form.xrkCode" :placeholder="'请输入葵码'">
							</el-input>
						</el-form-item>
						<el-form-item label="昵称">
							<el-input v-model="form.nickname" :placeholder="'请输入昵称'">
							</el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio v-model="form.sex" label="0">未知</el-radio>
							<el-radio v-model="form.sex" label="1">男</el-radio>
							<el-radio v-model="form.sex" label="2">女</el-radio>
						</el-form-item>
						<el-form-item label="真实姓名">
							<el-input v-model="form.trueName" :placeholder="'请输入真实姓名'">
							</el-input>
						</el-form-item>
						<el-form-item label="手机号">
							<el-input type="text" maxlength="11" v-model="form.mobile" :placeholder="'请输入手机号'">
							</el-input>
						</el-form-item>
						<el-form-item label="身份证号码">
							<el-input v-model="form.card" :placeholder="'请输入身份证号码'">
							</el-input>
						</el-form-item>
						<el-form-item label="支付宝账号">
							<el-input v-model="form.apliayUsername" :placeholder="'请输入支付宝账号'">
							</el-input>
						</el-form-item>
						<el-form-item label="支付宝登录密码">
							<el-input v-model="form.apliayPassword " :placeholder="'请输入支付宝登录密码'">
							</el-input>
						</el-form-item>
						<el-form-item label="支付宝支付密码">
							<el-input v-model="form.apliayPayPassword " :placeholder="'请输入支付宝支付密码'">
							</el-input>
						</el-form-item>
					</div>
					<div style="flex: 1; margin-right: 200px;">
						<el-form-item label="微信账号">
							<el-input v-model="form.wechatUsername" :placeholder="'请输入微信账号'">
							</el-input>
						</el-form-item>
						<el-form-item label="微信登录密码">
							<el-input v-model="form.wechatPassword" :placeholder="'请输入微信登录密码'">
							</el-input>
						</el-form-item>
						<el-form-item label="微信支付密码">
							<el-input v-model="form.wechatPayPassword" :placeholder="'请输入微信支付密码'">
							</el-input>
						</el-form-item>
						<el-form-item label="收款类型">
							<el-radio v-model="form.depositType" label="1">支付宝</el-radio>
							<el-radio v-model="form.depositType" label="2">微信</el-radio>
						</el-form-item>
						<el-form-item label="收款账号">
							<el-input v-model="form.depositUsername" :placeholder="'请输入收款账号'">
							</el-input>
						</el-form-item>
						<el-form-item label="常用手机号">
							<el-input v-model="form.cMobile" :placeholder="'请输入常用手机号'">
							</el-input>
						</el-form-item>

						<el-form-item label="平台">
							<el-select v-model="form.platformID" placeholder="请选择平台">
								<el-option v-for="item in skuList" :key="item.id" :label="item.name" :value="item.id">
									<span style="float: left">{{ item.name }}</span>

								</el-option>
							</el-select>

						</el-form-item>
					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" :disabled="addDisable" @click="submit('form')">确 定</el-button>
			</span>
		</el-dialog>
		<div class="margin-top-15" style="text-align: center; padding: 0 50px 50px 50px">
			<Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
				@on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
		</div>

		<!-- 用户信息导入上传 -->
		<xdelivery :deliveryVisible="deliveryVisible" :orderID="deliveryData" :all="allxx" @hidden="hidden"></xdelivery>
	</div>

</template>

<script>
	import axios from "axios";
	import xdelivery from "./delivery_user";
	export default {
		components: {
			xdelivery,
		},
		data() {
			return {
				deliveryVisible: false,
				allxx: false,
				deliveryData: {},
				time: "",
				beginTime: "",
				endTime: "",
				tableData: [],
				listQuery: {},
				form: {},
				isDisable: false,
				dialogVisible: false,
				addDisable:false,
				skuList: [], //平台列表

				tableShow: {
					currentPage: 1,
					pageSize: 10,
					listCount: 0,
				},
				rules: {
					xrkCode: [{
						required: true,
						message: '请输入葵码编号',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],

				},
			}
		},
		created() {
			this.tableShow.currentPage = parseInt(sessionStorage.getItem("page")) || 1;
			this.tableShow.pageSize = parseInt(sessionStorage.getItem("size")) || 10;
			axios.get("Platform/index").then((response) => {
				let res = response.data;
				this.skuList = res.data.list;

			});

			this.initPage();
		},
		methods: {
			copyToClipboard(txt) {

				var str = '姓名：' + txt.trueName +
					'\n注册手机号码：' + txt.mobile +
					'\n身份证号码：' + txt.card +
					'\n支付宝账号：' + txt.apliayUsername +
					'\n支付宝登录密码：' + txt.apliayPassword +
					'\n支付宝支付密码：' + txt.apliayPayPassword +
					'\n微信账号：' + txt.wechatUsername +
					'\n微信登录密码：' + txt.wechatPassword +
					'\n微信支付密码：' + txt.wechatPayPassword +
					'\n常用手机号：' + txt.cMobile;
				if (txt.depositType == 1) {
					str = str + '\n提现用支付宝：' + txt.depositUsername + '\n提现用支付宝姓名：' + txt.depositRealname;
				} else {
					str = str + '\n提现用微信：' + txt.depositUsername + '\n提现用微信姓名：' + txt.depositRealname
				}
				var oInput = document.createElement('textarea');
				oInput.value = str;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象
				document.execCommand("Copy"); // 执行浏览器复制命令
				document.body.removeChild(oInput)
				this.$message('复制成功');


			},

			hidden() {
				this.deliveryVisible = false;
				this.deliveryData = "";
				setTimeout(function() {
					this.allxx = false;
				}, 1);

				this.logisticsVisible = false;
				this.logisticsTradeNo = {};
				this.initPage();
			},
			alldelivery() {
				this.deliveryVisible = true;
				this.allxx = true;
			},
			timechange(val) {
				if (val) {
					this.beginTime = val[0];
					this.endTime = val[1];
				}
			},
			timechange2(val) {
				if (val) {
					this.listQuery.beginTime = val[0];
					this.listQuery.endTime = val[1];
				}
			},

			tableToExcel2(api) {
				const elink = document.createElement("a");
				var urlHead =
					"http://collectapi.jujingame.com/backstage/ClientUser/listDownload?acces_token=s4fnds5pms86rttb";
				elink.style.display = "none";
				elink.href = urlHead + "&beginTime=" + this.beginTime + "&endTime=" + this.endTime;
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			},
			reset() {
				this.tableShow = {
					currentPage: 1,
					pageSize: 10,
					listCount: 0,
				};

				this.listQuery = {};
				this.initPage();
			},
			changePage(page) {
				this.tableShow.currentPage = page;
				sessionStorage.setItem("page", this.tableShow.currentPage);
				this.initPage(this.multipleSelection);
			},
			changeSize(size) {
				this.tableShow.pageSize = size;
				sessionStorage.setItem("size", this.tableShow.currentPage);
				this.initPage(this.multipleSelection);
			},
			initPage(obj) {
				let that = this;
				if (this.tableShow.currentPage == 1) {
					this.tableData = [];
				}
				if (!obj) {
					var obj = {};
				}
				obj['page'] = this.tableShow.currentPage;
				obj['size'] = this.tableShow.pageSize;

				axios.get("ClientUser/index", {
					params: obj
				}).then(function(response) {
					let res = response.data;
					if (res.code === 1) {
						that.tableData = res.data.list;
						that.tableShow.listCount = res.data.count;
					} else {
						that.$Message.error(res.msg);
					}
				});
			},
			handleSearchList() {
				this.initPage(this.listQuery);
			},
			addFn: function(form,type) {
				console.log(form)
				// addDisable
				// type 1 查看  2 编辑 0 新增
				if (type == 0) {
					this.form = {};
					this.isDisable = false;
					
				} else if(type == 1){
					this.form = form;
					
					this.addDisable = true;
				} else if(type == 2){
					this.form = form;
					
					this.addDisable = false;
				}
				this.dialogVisible = true;
			},
			handleResetSearch() {
				this.listQuery = {};
				this.initPage();
			},
			
			handleClose() {
				this.form = {};
				this.dialogVisible = false;
				this.$refs["form"].resetFields();
			},

			submit(formName) {
				
				this.isDisable = true;
				if(!this.form.userID){
					var url = 'ClientUser/add';
				}else{
					var url = 'ClientUser/edit';
					delete this.form.statusText
					
				}
				
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post(url, this.form).then((response) => {
							setTimeout(() => {
								this.isDisable = false;
							}, 1000);
							if (response.data.code === 1) {
								this.$Message.success(response.data.msg);
								this.handleClose();
								this.initPage();
							} else {
								this.$message({
									message: response.data.msg,
									type: "warning",
								});
							}
						});
					} else {
						setTimeout(() => {
							this.isDisable = false;
						}, 1000);
						return false;
					}
				});
			},
		}
	}
</script>
<style scoped>
	.statusxBox {
		color: grey;

	}

	.gre {
		color: #008A00;
	}

	.re {
		color: firebrick;
	}
</style>
